/**
 * 页面性能优化混入
 * 将白屏卡顿优化方案封装为可复用的混入
 */

const { smartCache, trackPagePerformance, debounce } = require('./performance-monitor.js');

/**
 * 页面优化混入
 * 使用方法：在页面中 ...pageOptimizationMixin
 */
const pageOptimizationMixin = {
  data: {
    // 通用优化状态
    showSkeleton: true,
    renderStage: 'skeleton', // skeleton -> loading -> ready -> error
    isFirstLoad: true,
    lastUpdateTime: 0,
    perfTracker: null
  },

  /**
   * 页面加载优化
   */
  onLoadOptimized(pageName, initCallback) {
    // 启动性能监控
    this.perfTracker = trackPagePerformance(pageName);
    
    // 立即显示骨架屏
    this.setData({ 
      renderStage: 'skeleton',
      showSkeleton: true 
    });
    
    // 执行初始化回调
    if (typeof initCallback === 'function') {
      initCallback.call(this);
    }
  },

  /**
   * 页面准备完成优化
   */
  onReadyOptimized(secondaryCallback) {
    // 延迟加载次要数据
    setTimeout(() => {
      if (typeof secondaryCallback === 'function') {
        secondaryCallback.call(this);
      }
    }, 100);
  },

  /**
   * 页面显示优化
   */
  onShowOptimized(refreshCallback) {
    const { isFirstLoad, lastUpdateTime } = this.data;
    const now = Date.now();
    
    // 首次加载跳过
    if (isFirstLoad) {
      return;
    }
    
    // 如果数据太旧（超过5分钟），刷新数据
    if (now - lastUpdateTime > 5 * 60 * 1000) {
      if (typeof refreshCallback === 'function') {
        refreshCallback.call(this);
      }
    }
  },

  /**
   * 页面卸载优化
   */
  onUnloadOptimized() {
    // 清理定时器
    if (this.searchTimer) {
      clearTimeout(this.searchTimer);
      this.searchTimer = null;
    }
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
      this.refreshTimer = null;
    }
  },

  /**
   * 标记页面加载完成
   */
  markPageReady() {
    this.setData({
      renderStage: 'ready',
      showSkeleton: false,
      isFirstLoad: false,
      lastUpdateTime: Date.now()
    });
    
    // 记录页面加载完成
    if (this.perfTracker) {
      this.perfTracker.markReady();
    }
  },

  /**
   * 标记页面加载失败
   */
  markPageError(error) {
    console.error('页面加载失败:', error);
    
    this.setData({
      renderStage: 'error',
      showSkeleton: false
    });
    
    // 即使失败也要记录加载时间
    if (this.perfTracker) {
      this.perfTracker.markReady();
    }
  },

  /**
   * 智能缓存加载数据
   */
  async loadDataWithCache(cacheKey, apiFunction, ttl = 5 * 60 * 1000) {
    // 尝试从缓存获取数据
    const cachedData = smartCache.get(cacheKey);
    if (cachedData) {
      return { success: true, data: cachedData, fromCache: true };
    }
    
    try {
      const result = await apiFunction();
      
      if (result.message == "操作成功") {
        // 缓存成功的数据
        smartCache.set(cacheKey, result.data, ttl);
        return { ...result, fromCache: false };
      } else {
        return result;
      }
    } catch (error) {
      console.error(`网络请求失败: ${cacheKey}`, error);
      
      // 尝试使用过期缓存作为降级方案
      try {
        const expiredCache = wx.getStorageSync(`smart_cache_${cacheKey}`);
        if (expiredCache && expiredCache.data) {
          return { 
            success: true, 
            data: expiredCache.data, 
            fromCache: true, 
            isExpired: true 
          };
        }
      } catch (cacheError) {
        console.error('读取过期缓存失败:', cacheError);
      }
      
      return { success: false, error: error.message };
    }
  },

  /**
   * 优化的搜索处理（防抖）
   */
  createDebouncedSearch(searchFunction, delay = 300) {
    return debounce(function(e) {
      const keyword = e.detail.value;
      searchFunction.call(this, keyword);
    }, delay);
  },

  /**
   * 分批加载列表数据
   */
  async loadListInBatches(dataArray, batchSize = 10, processBatch) {
    for (let i = 0; i < dataArray.length; i += batchSize) {
      const batch = dataArray.slice(i, i + batchSize);
      
      // 处理这一批数据
      if (typeof processBatch === 'function') {
        await processBatch.call(this, batch, i);
      }
      
      // 给UI一个更新的机会
      await new Promise(resolve => setTimeout(resolve, 16)); // 一帧的时间
    }
  },

  /**
   * 预加载下一页数据
   */
  preloadNextPage(nextPageDataLoader) {
    setTimeout(() => {
      if (typeof nextPageDataLoader === 'function') {
        nextPageDataLoader.call(this);
      }
    }, 1000); // 延迟1秒预加载
  }
};

/**
 * 骨架屏通用样式
 * 在页面的wxss中引入这些样式
 */
const skeletonStyles = `
/* 骨架屏通用样式 */
.skeleton-container {
  padding: 32rpx;
  background: #fff;
}

.skeleton-item {
  margin-bottom: 24rpx;
}

.skeleton-line {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4rpx;
}

.skeleton-title {
  height: 32rpx;
  width: 60%;
  margin-bottom: 16rpx;
}

.skeleton-text {
  height: 28rpx;
  width: 80%;
  margin-bottom: 12rpx;
}

.skeleton-text-short {
  height: 24rpx;
  width: 40%;
}

.skeleton-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-button {
  height: 80rpx;
  width: 200rpx;
  border-radius: 8rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* 渐入动画 */
.fadeIn {
  animation: fadeIn 0.3s ease-in-out;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
`;

/**
 * 使用示例
 */
const usageExample = `
// 在页面JS中使用
const pageOptimizationMixin = require('../../utils/page-optimization-mixin.js');

Page({
  // 混入优化方法
  ...pageOptimizationMixin,
  
  data: {
    ...pageOptimizationMixin.data,
    // 页面特有数据
    list: []
  },

  onLoad() {
    // 使用优化的onLoad
    this.onLoadOptimized('page-name', () => {
      this.loadEssentialData();
    });
  },

  onReady() {
    // 使用优化的onReady
    this.onReadyOptimized(() => {
      this.loadSecondaryData();
    });
  },

  onShow() {
    // 使用优化的onShow
    this.onShowOptimized(() => {
      this.refreshData();
    });
  },

  onUnload() {
    // 使用优化的onUnload
    this.onUnloadOptimized();
  },

  async loadEssentialData() {
    try {
      const result = await this.loadDataWithCache('key', () => api.getData());
      
      if (result.message == "操作成功") {
        this.setData({ list: result.data });
        this.markPageReady();
      } else {
        this.markPageError(result.error);
      }
    } catch (error) {
      this.markPageError(error);
    }
  },

  // 搜索处理
  onSearch: this.createDebouncedSearch(function(keyword) {
    // 搜索逻辑
  })
});
`;

module.exports = {
  pageOptimizationMixin,
  skeletonStyles,
  usageExample
};
